<template>
  <div>
    <Bg imgUrl="http://localhost:3000/upload/banner2.jpg" title="News"></Bg>
    <div class="content-list">
      <h1>文章资讯栏</h1>
      <div class="article-box" v-for="article in articles" :key="article._id">
        <a-comment>
          <template slot="actions">
            <a-tag color="orange">文章关键字</a-tag>
            <span>{{article.keywords}}</span>
            <a-tag color="cyan">分类</a-tag>
            <span>{{article.catename}}</span>
          </template>
          
          <a-avatar
            slot="avatar"
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            alt="Han Solo"
          />
          <p slot="content">{{article.description}}</p>
          <a-tooltip
            slot="datetime"
            :title="moment(article.add_time).format('YYYY-MM-DD HH:mm:ss')"
          >
            <a-tag color="pink">作者：{{article.author}}</a-tag>
            <span>{{ moment(article.add_time).fromNow() }}</span>
          </a-tooltip>
        </a-comment>
      </div>
      <div class="pagnation">
        <a-pagination v-model="current" :page-size.sync="pageSize" :total=total @change="onChange" show-less-items />
      </div>
    </div>
  </div>
</template>
<script>
import Bg from '@/components/content/bgContainer/Index';
import { getArticles } from '@/network/api.js';
import moment from 'moment';

export default {
  name: 'Index',
  data() {
    return {
      articles: [],
      likes: 0,
      dislikes: 0,
      action: null,
      moment,
      total: 0,
      totalPage: 0,
      current: 1,
      pageSize: 8
    };
  },
  created() {
    this.getArticles();
  },
  methods: {
    async getArticles(pageNumber) {
      let params = {page: pageNumber}
      let articles = await getArticles({params});
      this.articles = articles.data;
      this.total = articles.meta.total
      this.totalPage = articles.meta.totalPages
    },
    like() {
      this.likes = 1;
      this.dislikes = 0;
      this.action = 'liked';
    },
    dislike() {
      this.likes = 0;
      this.dislikes = 1;
      this.action = 'disliked';
    },
    onChange(pageNumber) {
      this.current = pageNumber
      this.getArticles(this.current)
    },
  },
  components: {
    Bg,
  },
};
</script>

<style lang="less" scoped>
  .content-list{
    width: 70%;
    margin: 30px auto;
    h1{
      text-align: center;
    }
    .article-box{
      width: 100%;
    }
  }
</style>
